import React, { forwardRef, useEffect, useState, useRef } from 'react';
import 'antd/dist/antd.css';
import style from './index.module.css';
import axios from 'axios';
import { SearchBar } from 'antd-mobile';
import { Modal, Form, Button, Input } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';

const { list, main, shop, wen, tele, tele2, del, Search } = style;

const Dynamic = forwardRef((props, ref) => {
  const [userList, setUserList] = useState([]);
  const addForm = useRef(null);
  const updateForm = useRef(null);
  const [current, setCurrent] = useState(null);
  const [visible, setVisible] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const getUser = () => {
    axios.get(`http://localhost:3004/dynamic`).then((res) => {
      setUserList(res.data);
    });
  };
  const onChangeUserList = (item) => {
    setTimeout(() => {
      setVisible(true);

      updateForm.current.setFieldsValue(item);
    }, 0);
    // 把每次更新的哪个 存下来
    setCurrent(item);
  };
  const onChange = (val) => {
    const arr = userList.filter((item) => item.title.includes(val));
    setUserList(arr);
  };
  const onDelUserList = (id) => {
    axios.delete(`http://localhost:3004/dynamic/${id}`).then((res) => {
      getUser();
    });
  };
  useEffect(() => {
    getUser();
  }, []);

  return (
    <div>
      <div className={Search}>
        <Button
          type="primary"
          onClick={() => {
            setIsVisible(true);
          }}
        >
          添加动态
        </Button>
        <SearchBar placeholder="请输入动态" onSearch={onChange} />

        <Modal
          visible={isVisible}
          title="添加动态"
          okText="确定"
          cancelText="取消"
          onCancel={() => {
            setIsVisible(false);
          }}
          onOk={() => {
            addForm.current.validateFields().then((values) => {
              axios.post(`http://localhost:3004/dynamic`, {
                ...values,
              });

              setTimeout(() => {
                getUser();
              }, 500);

              setIsVisible(false);
              addForm.current.resetFields();
            });
          }}
        >
          <Form ref={addForm} layout="vertical">
            <Form.Item
              name="title"
              label="小店动态主题"
              rules={[{ required: true, message: '小店动态主题不能为空' }]}
            >
              <Input placeholder="填写您的小店动态主题" />
            </Form.Item>
            <Form.Item
              name="content"
              label="小店动态具体内容"
              rules={[{ required: true, message: '小店动态具体内容不能为空' }]}
            >
              <Input placeholder="填写您的小店动态具体内容" />
            </Form.Item>
          </Form>
        </Modal>
      </div>
      <div className={main}>
        <p>共有{userList.length}条小店动态</p>
        <ul className={list}>
          {userList.map((item) => {
            return (
              <li key={item.id} className={shop}>
                <div className={wen}>
                  <div className={del}>
                    <h1 className={tele}>{item.title}</h1>
                    <div>
                      <span
                        style={{
                          color: '#f00',
                          cursor: 'pointer',
                        }}
                        onClick={() => onDelUserList(item.id)}
                      >
                        <DeleteOutlined /> 删除
                      </span>
                      <span
                        style={{
                          color: '#f00',
                          cursor: 'pointer',
                          marginLeft: '20px',
                        }}
                        onClick={() => onChangeUserList(item)}
                      >
                        <EditOutlined /> 编辑
                      </span>
                    </div>
                  </div>
                  <p className={tele2}>{item.content}</p>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <Modal
        visible={visible}
        title="编辑用户"
        okText="确定"
        cancelText="取消"
        onCancel={() => {
          setVisible(false);
        }}
        onOk={() => {
          updateForm.current
            .validateFields()
            .then((values) => {
              console.log(values);
              console.log(current);
              axios.patch(`http://localhost:3004/dynamic/${current.id}`, {
                ...values,
              });
              setTimeout(() => {
                getUser();
              }, 500);
              setVisible(false);
            })
            .catch((err) => {
              console.log(err);
            });
        }}
      >
        <Form ref={updateForm} layout="vertical">
          <Form.Item
            name="title"
            label="小店动态主题"
            rules={[{ required: true, message: '小店动态主题不能为空' }]}
          >
            <Input placeholder="填写您的小店动态主题" />
          </Form.Item>
          <Form.Item
            name="content"
            label="小店动态具体内容"
            rules={[{ required: true, message: '小店动态具体内容不能为空' }]}
          >
            <Input placeholder="填写您的小店动态具体内容" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
});

export default Dynamic;
